<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Management</title>
    <style>
        #app {
            width: 500px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table tr th,
        table tr td {
            height: 35px;
            border-bottom: solid 1px #999;
            text-align: center;
        }
        .clear-btn {
            text-align: right;
        }
    </style>
    <!-- 引入vue3 js库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <!-- <th>序号</th>> -->
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(value,index) in users" :key="value.userId">
                    <td>{{index}}</td>
                    <!-- <td>{{value.userId}}</td> -->
                    <td>{{value.userName}}</td>
                    <td>{{value.userAge}}</td>
                    <td>
                        <button @click="deleteUser(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="4"><button @click="clear">清空</button></td>
                </tr>
            </tbody>
        </table>
        <hr>
        <div>
            <label for="userName">姓名  </label>
            <input type="text" v-model="newUser.userName" id="userName">
        </div>
        <div>
            <label for="userAge">年龄   </label>
            <input type="text" v-model="newUser.userAge" id="userAge">
        </div>
        <button @click="addUser">添加</button>
    </div>
    <script>
        Vue.createApp({
            data(){
                return{
                    users:
                    [
                        {
                            userId:1,
                            userName:'Jack',
                            userAge:20
                        },
                        {
                            userId:2,
                            userName:'Emily',
                            userAge:21
                        },
                        {
                            userId:3,
                            userName:'Alex',
                            userAge:25
                        }
                    ],
                    newUser: {
                        userId: '',
                        userName: '',
                        userAge:''
                    }
                }
            },
            methods:{
                addUser(){
                    this.users.push(this.newUser);
                    this.newUser = {
                        userId: '',
                        userName: '',
                        userAge:''
                    }
                },
                deleteUser(index) {
                    this.users.splice(index, 1);
                },
                clear() {
                    this.arr.splice(0, this.users.length);
                    //this.arr = [];
                }
            }
        }).mount("#app")
    </script>
</body>
</html>
